<template>
	<!-- 音频播放器组件 -->
	<view class="fboxRow Ycenter audio-item bg-F7F8FF">
		<view class="icon-btn" @click="start(audioId)">
			<image src="https://ebc-prod.cdn.benwunet.com/uni-static/icon-audio.png" class="icon" v-show="!status && !isPause"></image>
			<image src="https://ebc-prod.cdn.benwunet.com/uni-static/icon-audio-3.png" class="icon" v-show="status"></image>
			<image src="https://ebc-prod.cdn.benwunet.com/uni-static/icon-audio-4.png" class="icon" v-show="!status && isPause"></image>
		</view>
		<view class="fboxCol flex1">
			<view class="hd fboxRow Ycenter">
				<view class="flex1 color-main font26">语音介绍</view>
				<text class="font20 state color-969699" v-if="innerData.auditStatus != 1">{{ innerData.auditStatus == 0 ? '待审核' : innerData.reason || '' }}</text>
				<u-icon @click="del" color="#969699" name="trash"></u-icon>
			</view>
			<slider
				class="slider"
				@change="changeAudio"
				backgroundColor="#E8EDF1"
				activeColor="#CC9870"
				block-color="#CC9870"
				block-size="10"
				:min="0"
				:max="duration.toFixed(0)"
				:value="currentTime.toFixed(0)"
				:step="0.1"
			></slider>
			<view class="fboxRow Ycenter font20 color-969699">
				{{ getTime(Math.round(currentTime)) }}
				<view class="flex1"></view>
				{{ getTime(Math.round(duration)) }}
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		url: String,
		voiceType: {
			type: String,
			default: ''
		},
		innerData: {
			type: Object,
			defalult: () => {
				return {};
			}
		},
		audioId: [String, Number] //必填，且id不可为数字0，建议格式 ‘audio’+数字
	},
	data() {
		return {
			context: null,
			currentTime: 0,
			duration: 0,
			status: false,
			isPause: false
		};
	},
	created() {
		this.context = uni.createInnerAudioContext(); //初始化音频
		this.context.src = this.url;
		console.log('目前url==',this.url);
		this.onTimeUpdate();
		this.onCanplay();
		this.onEnded();
		// uni.$on('stop',(id)=> {
		// 	console.log('uni.$on(stop')
		// 	if(id && id != this.audioId) {
		// 		this.context.stop();
		// 		this.status = false;
		// 	} else if(!id){
		// 		this.context.stop();
		// 		this.status = false;
		// 	}
		// })
	},
	methods: {
		del() {
			uni.showModal({
				title: '',
				content: '是否要删除自定义语音？',
				confirmColor: '#110C22',
				cancelColor: '#969699',
				success: res => {
					if (res.confirm) {
						this.$emit('del', this.voiceType);
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		start(id) {
			//点击播放
			console.log('点击播放');
			let audioId = id;
			if (this.status) {
				this.context.pause();
				this.status = !this.status;
				this.isPause = true;
			} else {
				// uni.$emit('stop',id)
				this.context.play();
				this.status = !this.status;
			}
		},
		onCanplay() {
			//进入可播放状态
			this.context.onCanplay(() => {
				this.context.duration;
				setTimeout(() => {
					this.duration = this.context.duration;
				}, 1000);
			});
		},
		onTimeUpdate() {
			//音频播放进度
			console.log('进入音频播放进度');
			this.context.onTimeUpdate(() => {
				if (!Number.isFinite(this.context.duration)) {
					//检测当前音频是否为无穷大
					this.context.currentTime = Number.MAX_SAFE_INTEGER;
					this.context.currentTime = 0;
				} else {
					this.duration = this.context.duration;
					this.currentTime = this.context.currentTime;
				}
			});
		},
		onEnded() {
			//播放结束
			this.context.onEnded(() => {
				this.status = false;
				this.isPause = false;
				this.currentTime = 0;
			});
		},
		changeAudio(e) {
			let paused = this.context.paused;
			this.context.pause();
			this.context.seek(e.detail.value);
			if (!paused) {
				this.context.play();
			}
		},
		getTime(time) {
			let m = parseInt(time / 60);
			let s = time % 60;
			return this.towNum(m) + ':' + this.towNum(s);
		},
		towNum(num) {
			if (num >= 10) {
				return num;
			} else {
				return '0' + num;
			}
		}
	}
};
</script>

<style>
.audio-item {
	padding: 20rpx 30rpx;
	/* width: 670rpx; */
	height: 118rpx;
	background: #f7f8ff;
	border-radius: 10rpx;
}
.slider {
	margin: 0;
}
.icon-btn {
	margin-right: 20rpx;
}
.state {
	margin-right: 20rpx;
}
.audio {
	background: #4d4d4d;
	padding: 30rpx 32rpx;
	border-radius: 8rpx;
	margin-bottom: 20rpx;
}

.icon {
	width: 38rpx;
	height: 38rpx;
}

.flex {
	display: flex;
	flex-direction: row;
}

.justify-between {
	justify-content: between;
}

.align-center {
	align-items: center;
}

.flex-1 {
	flex: 1;
}

.ml-3 {
	color: #ffffff;
	font-size: 24rpx;
}
</style>
